<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>行情数据可视化</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
	<style>
		.visualization-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.dashboard-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 25px;
			margin-bottom: 25px;
		}
		.chart-card {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
		}
		.card-header {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.card-title {
			font-size: 18px;
			font-weight: 600;
			display: flex;
			align-items: center;
			gap: 10px;
		}
		.card-content {
			padding: 20px;
		}
		.chart-container {
			height: 400px;
			width: 100%;
		}
		.full-width-card {
			grid-column: 1 / -1;
		}
		.stats-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
			gap: 15px;
			margin-bottom: 20px;
		}
		.stat-item {
			background: #f8f9fa;
			padding: 20px;
			border-radius: 8px;
			text-align: center;
			border-left: 4px solid #409eff;
		}
		.stat-number {
			font-size: 28px;
			font-weight: bold;
			color: #409eff;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.stat-change {
			font-size: 12px;
			margin-top: 5px;
		}
		.positive {
			color: #67c23a;
		}
		.negative {
			color: #f56c6c;
		}
		.filter-section {
			background: #fff;
			padding: 20px;
			border-radius: 8px;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
			margin-bottom: 25px;
			display: flex;
			gap: 15px;
			align-items: center;
			flex-wrap: wrap;
		}
		.filter-label {
			font-weight: 500;
			color: #333;
		}
		.heatmap-container {
			height: 500px;
			width: 100%;
		}
		.trend-indicator {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			padding: 4px 8px;
			border-radius: 4px;
			font-size: 12px;
			font-weight: 500;
		}
		.trend-up {
			background: #f0f9ff;
			color: #0369a1;
		}
		.trend-down {
			background: #fef2f2;
			color: #dc2626;
		}
		.trend-stable {
			background: #f0fdf4;
			color: #166534;
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="visualization-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>行情数据可视化</h2>
				<p>直观展示价格走势图表、供需热力图等数据分析</p>
			</div>

			<!-- 筛选控制区 -->
			<div class="filter-section">
				<span class="filter-label">数据筛选：</span>
				<el-select v-model="selectedCategory" placeholder="选择品类" size="small" style="width: 120px;" @change="updateCharts">
					<el-option label="全部品类" value="all"></el-option>
					<el-option label="生鲜蔬菜" value="vegetable"></el-option>
					<el-option label="精品肉类" value="meat"></el-option>
					<el-option label="海鲜水产" value="seafood"></el-option>
					<el-option label="冷冻食品" value="frozen"></el-option>
				</el-select>
				<el-select v-model="selectedRegion" placeholder="选择地区" size="small" style="width: 120px;" @change="updateCharts">
					<el-option label="全国" value="national"></el-option>
					<el-option label="华北" value="north"></el-option>
					<el-option label="华东" value="east"></el-option>
					<el-option label="华南" value="south"></el-option>
					<el-option label="西南" value="southwest"></el-option>
				</el-select>
				<el-date-picker
					v-model="dateRange"
					type="daterange"
					size="small"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="updateCharts">
				</el-date-picker>
				<el-button size="small" type="primary" @click="refreshData">
					<i class="el-icon-refresh"></i> 刷新数据
				</el-button>
			</div>

			<!-- 关键指标概览 -->
			<div class="stats-grid">
				<div class="stat-item">
					<div class="stat-number">128.6</div>
					<div class="stat-label">平均价格指数</div>
					<div class="stat-change positive">↑ 3.2%</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">85.4%</div>
					<div class="stat-label">市场活跃度</div>
					<div class="stat-change positive">↑ 1.8%</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">1,286</div>
					<div class="stat-label">交易品种数</div>
					<div class="stat-change negative">↓ 0.5%</div>
				</div>
				<div class="stat-item">
					<div class="stat-number">92.3%</div>
					<div class="stat-label">供应充足率</div>
					<div class="stat-change positive">↑ 2.1%</div>
				</div>
			</div>

			<!-- 图表展示区域 -->
			<div class="dashboard-grid">
				<!-- 价格走势图 -->
				<div class="chart-card">
					<div class="card-header">
						<div class="card-title">
							<i class="el-icon-trend-charts"></i>
							价格走势分析
						</div>
						<span class="trend-indicator trend-up">
							<i class="el-icon-top"></i>
							上涨趋势
						</span>
					</div>
					<div class="card-content">
						<div id="priceChart" class="chart-container"></div>
					</div>
				</div>

				<!-- 品类价格对比 -->
				<div class="chart-card">
					<div class="card-header">
						<div class="card-title">
							<i class="el-icon-pie-chart"></i>
							品类价格对比
						</div>
					</div>
					<div class="card-content">
						<div id="categoryChart" class="chart-container"></div>
					</div>
				</div>

				<!-- 供需热力图 -->
				<div class="chart-card full-width-card">
					<div class="card-header">
						<div class="card-title">
							<i class="el-icon-map-location"></i>
							全国供需热力图
						</div>
						<el-radio-group v-model="heatmapType" size="small" @change="updateHeatmap">
							<el-radio-button label="supply">供应量</el-radio-button>
							<el-radio-button label="demand">需求量</el-radio-button>
							<el-radio-button label="price">价格水平</el-radio-button>
						</el-radio-group>
					</div>
					<div class="card-content">
						<div id="heatmapChart" class="heatmap-container"></div>
					</div>
				</div>

				<!-- 市场波动性分析 -->
				<div class="chart-card">
					<div class="card-header">
						<div class="card-title">
							<i class="el-icon-data-analysis"></i>
							市场波动性分析
						</div>
					</div>
					<div class="card-content">
						<div id="volatilityChart" class="chart-container"></div>
					</div>
				</div>

				<!-- 交易量分布 -->
				<div class="chart-card">
					<div class="card-header">
						<div class="card-title">
							<i class="el-icon-data-board"></i>
							交易量时段分布
						</div>
					</div>
					<div class="card-content">
						<div id="volumeChart" class="chart-container"></div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					selectedCategory: 'all',
					selectedRegion: 'national',
					dateRange: [],
					heatmapType: 'supply',
					charts: {}
				}
			},
			methods: {
				initCharts() {
					this.initPriceChart();
					this.initCategoryChart();
					this.initHeatmapChart();
					this.initVolatilityChart();
					this.initVolumeChart();
				},
				
				initPriceChart() {
					const chart = echarts.init(document.getElementById('priceChart'));
					const option = {
						tooltip: {
							trigger: 'axis',
							axisPointer: { type: 'cross' }
						},
						legend: {
							data: ['蔬菜类', '肉类', '海鲜类', '冷冻食品']
						},
						grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
						xAxis: {
							type: 'category',
							data: ['01-01', '01-07', '01-14', '01-21', '01-28', '02-04', '02-11']
						},
						yAxis: { type: 'value', name: '价格指数' },
						series: [
							{
								name: '蔬菜类', type: 'line', smooth: true,
								data: [102, 105, 108, 112, 115, 118, 125],
								itemStyle: { color: '#5cb87a' }
							},
							{
								name: '肉类', type: 'line', smooth: true,
								data: [156, 158, 162, 165, 168, 172, 175],
								itemStyle: { color: '#e6a23c' }
							},
							{
								name: '海鲜类', type: 'line', smooth: true,
								data: [198, 205, 212, 208, 215, 220, 228],
								itemStyle: { color: '#409eff' }
							},
							{
								name: '冷冻食品', type: 'line', smooth: true,
								data: [89, 92, 95, 98, 101, 104, 107],
								itemStyle: { color: '#f56c6c' }
							}
						]
					};
					chart.setOption(option);
					this.charts.priceChart = chart;
				},

				initCategoryChart() {
					const chart = echarts.init(document.getElementById('categoryChart'));
					const option = {
						tooltip: { trigger: 'item' },
						legend: { orient: 'vertical', left: 'left' },
						series: [{
							name: '品类价格占比',
							type: 'pie',
							radius: '70%',
							data: [
								{ value: 335, name: '蔬菜类', itemStyle: { color: '#5cb87a' } },
								{ value: 310, name: '肉类', itemStyle: { color: '#e6a23c' } },
								{ value: 234, name: '海鲜类', itemStyle: { color: '#409eff' } },
								{ value: 135, name: '冷冻食品', itemStyle: { color: '#f56c6c' } },
								{ value: 156, name: '乳制品', itemStyle: { color: '#909399' } }
							],
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};
					chart.setOption(option);
					this.charts.categoryChart = chart;
				},

				initHeatmapChart() {
					const chart = echarts.init(document.getElementById('heatmapChart'));
					const provinces = [
						'北京', '天津', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江',
						'上海', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南',
						'湖北', '湖南', '广东', '广西', '海南', '重庆', '四川', '贵州',
						'云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆'
					];
					const data = provinces.map((province, index) => [
						index % 7, Math.floor(index / 7), Math.floor(Math.random() * 100)
					]);
					
					const option = {
						tooltip: {
							position: 'top',
							formatter: function(params) {
								return provinces[params.data[1] * 7 + params.data[0]] + '<br/>数值: ' + params.data[2];
							}
						},
						grid: { height: '70%', top: '10%' },
						xAxis: {
							type: 'category',
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
							splitArea: { show: true }
						},
						yAxis: {
							type: 'category',
							data: ['第1周', '第2周', '第3周', '第4周', '第5周'],
							splitArea: { show: true }
						},
						visualMap: {
							min: 0,
							max: 100,
							calculable: true,
							orient: 'horizontal',
							left: 'center',
							bottom: '5%',
							inRange: { color: ['#e0f3ff', '#409eff', '#1890ff'] }
						},
						series: [{
							name: '供需热力',
							type: 'heatmap',
							data: data.slice(0, 35),
							label: { show: true },
							emphasis: {
								itemStyle: { shadowBlur: 10, shadowColor: 'rgba(0, 0, 0, 0.5)' }
							}
						}]
					};
					chart.setOption(option);
					this.charts.heatmapChart = chart;
				},

				initVolatilityChart() {
					const chart = echarts.init(document.getElementById('volatilityChart'));
					const option = {
						tooltip: { trigger: 'axis' },
						legend: { data: ['价格波动率', '平均波动率'] },
						grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
						xAxis: {
							type: 'category',
							data: ['蔬菜', '肉类', '海鲜', '冷冻', '乳制品', '水果']
						},
						yAxis: { type: 'value', name: '波动率(%)' },
						series: [
							{
								name: '价格波动率', type: 'bar',
								data: [8.5, 12.3, 15.8, 6.2, 9.7, 11.4],
								itemStyle: { color: '#409eff' }
							},
							{
								name: '平均波动率', type: 'line',
								data: [10.2, 10.2, 10.2, 10.2, 10.2, 10.2],
								itemStyle: { color: '#f56c6c' }
							}
						]
					};
					chart.setOption(option);
					this.charts.volatilityChart = chart;
				},

				initVolumeChart() {
					const chart = echarts.init(document.getElementById('volumeChart'));
					const option = {
						tooltip: { trigger: 'axis' },
						legend: { data: ['交易量'] },
						grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
						xAxis: {
							type: 'category',
							data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00']
						},
						yAxis: { type: 'value', name: '交易量' },
						series: [{
							name: '交易量', type: 'bar',
							data: [320, 450, 1200, 800, 650, 380],
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
									{offset: 0, color: '#83bff6'},
									{offset: 0.5, color: '#188df0'},
									{offset: 1, color: '#188df0'}
								])
							}
						}]
					};
					chart.setOption(option);
					this.charts.volumeChart = chart;
				},

				updateCharts() {
					this.$message.info('数据更新中...');
					// 实际应用中这里会根据筛选条件重新请求数据并更新图表
					setTimeout(() => {
						this.$message.success('数据已更新');
					}, 1000);
				},

				updateHeatmap() {
					this.$message.info(`切换到${this.heatmapType === 'supply' ? '供应量' : this.heatmapType === 'demand' ? '需求量' : '价格水平'}视图`);
					// 实际应用中这里会更新热力图数据
				},

				refreshData() {
					this.$message.success('数据已刷新');
					// 实际应用中这里会重新加载所有图表数据
				},

				resizeCharts() {
					Object.values(this.charts).forEach(chart => {
						chart.resize();
					});
				}
			},
			mounted() {
				this.$nextTick(() => {
					this.initCharts();
				});
				
				// 监听窗口大小变化
				window.addEventListener('resize', this.resizeCharts);
			},
			beforeDestroy() {
				window.removeEventListener('resize', this.resizeCharts);
				Object.values(this.charts).forEach(chart => {
					chart.dispose();
				});
			}
		});
	</script>
</body>
</html>